<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<title>猫眼看房</title>
		<link rel="stylesheet" type="text/css" href="../../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/main.css" />
		<style>
		#chooseCity{
			width: 11.8rem;
			height: 1.5rem;
			background: #E6E6E6;
			color: #333;
			border-radius: .2rem;
			outline: none;
			padding: 0 .6rem;
			font-size: .55rem;
		}
		#chooseCity::-webkit-input-placeholder{
			color: #888888;
		}
		.top_search{
			justify-content: space-between;
			align-items: center;
			padding: .3rem .6rem;
			border-bottom: 1px solid #e2e2e2;
			position: relative;
		}
		.top_search i{
			position: absolute;
			right: 2.8rem;
			top: .7rem;
			font-size: .7rem;
			color: #7D7D7D;
			display: none;
		}
		.top_search a{
			margin-right: .1rem;
			font-size: .55rem;
			color: #333;
		}
		.choose-screening-input{
			position: relative;
			
		}
		.auto-screening{
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 9;
			overflow: hidden;
			border-bottom: 0;
			border-top: 0;
			background: #none;
		}
		.auto-screening-prompt{
			width: 100%;
			font-size: .55rem;
			height: 2rem;
			line-height: 2rem;
			border-bottom: 1px solid #cccccc;
			background: none;
			padding: 0 1.2rem;
		}
		.auto-screening-prompt:hover{
			background: #cccccc;
		}
		.hotbox{
			padding: 0 0 .6rem;
			margin-right: -.3rem;
		}
		.hotbox p{
			padding: 1rem .6rem 0;
			font-size: .55rem;
			color: #333;
		}
		.hotbox .row {flex-wrap: wrap;padding: 0 1.2rem;margin-top: 1rem;}
		.hotbox .row a{
			font-size: .55rem;
			color: #666;
			padding: .2rem .6rem;
			margin-right: .4rem;
			border: 1px solid #BFBFBF;
			margin-bottom: .4rem;
			border-radius: .2rem;
		}
		.hotbox .column a{
			position: relative;
			padding:  .8rem .6rem .8rem 1.7rem;
			font-size: .55rem;
			color: #262626;
			border-bottom: 1px solid #e2e2e2;
		}
		.hotbox .column a:before{
			position: absolute;
			content: "\e616";
			font-family: 'iconfont';
			font-size: .7rem;
			color: #CCCCCC;
			left: .6rem;
		}
	</style>
	</head>
	<body>
		<div class="choose-screening">
			<form action="" method="post">
				<div class="choose-screening-input">
					<div class="top_search row">
						<input name="searchCity" type="text" id="chooseCity" placeholder="请输入楼盘名或地址">
						<i class="iconfont icon-guanbi-copy" onclick="clearWord(this)"></i>
						<a href="javascript:;">取消</a>
					</div>
					<div class="auto-screening auto-hidden" id="autoScreening"></div>
					<div class="hotbox">
						<p>热门搜索</p>
						<div class="row">
							<a href="#">中海神州半岛</a>
							<a href="#">绿地悦澜湾</a>
							<a href="#">融创日月湾</a>
							<a href="#">碧桂园三亚郡</a>
							<a href="#">三亚棕榈滩</a>
							<a href="#">中海神州半岛</a>
						</div>
					</div>
					<div class="block4"></div>
					<div class="hotbox">
						<p>搜索历史</p>
						<div class="column">
							<a href="#">三亚 · 三亚市区 · 200-300万 · 2房 · 可按揭</a>
							<a href="#">绿地悦澜湾</a>
							<a href="#">三亚 ·  200-300万 · 2房 </a>
							<a href="#">陵水 · 3房 · 海景 · 拎包入住</a>
							<a href="#">三亚棕榈滩</a>
							<a href="#">香水湾壹号</a>
						</div>
					</div>
				</div>	
			</form>
		</div>
		<script src="../../js/jquery.min.js"></script>
		<script src="../../js/swiper.min.js"></script>
		<script src="../../js/layer/layer.js"></script>
		<script src="../../js/wap.js"></script>
		<script>
			$("#chooseCity").bind('input propertychange',function(){
				if($(this).val() !== ''){
					$('.top_search i').css('display','flex');
				} else {
					$('.top_search i').css('display','none');
				}
				/*这个是全部数据的数组*/
				var arr = ['万科','湖畔','清澜半岛','月亮湾','万科湖畔','万科森林鸟语','万科云间传奇','万科翡翠山庄'];
				/*这个数组我是防止出现重复的数据进行数据去重复后的新数组*/
				var arrNew = [];
				var i;
				for(i=0;i<arr.length;i++){
					var arrItems=arr[i];
				　　  /*判断元素是否存在于arrNew中，如果不存在则插入到arrNew的最后*/
				　　  if($.inArray(arrItems,arrNew)==-1) {
				　　　　    arrNew.push(arrItems);
						/*console.log(arrNew);*/													
					}
				}
				/*这是将input中输入的数据有关联的全部加入新生成的div中显示出来*/
				for(i=0;i<arrNew.length;i++){
					var arrWord = arrNew[i].toString();
					/*console.log(arrWord);*/
					if(((arrWord.indexOf($('#chooseCity').val())) > -1) && ($('#chooseCity').val().length > 0)){
						var addArrWord = "<div class=auto-screening-prompt>" + arrWord + "</div>";
   						$("#autoScreening").append(addArrWord);
   						$("#autoScreening").removeClass("auto-hidden");
   						$('#autoScreening').css('background','#fff');
					}
				}
				/*将显示出来的div的内容去重复，input内容变动时去重复*/
				$(".auto-screening-prompt").each(function(){
					if($(this).text().indexOf($('#chooseCity').val()) < 0){
						$(this).remove();
					}
					else if($('#chooseCity').val().length == 0){
						$("#autoScreening").addClass("auto-hidden");
						$(".auto-screening-prompt").remove();
					}
				});	
				/*弹出的提示div去重复*/
				$(".auto-screening-prompt").each(function(i, iText){
		            var iTextHtml = iText.innerHTML;
		            $(".auto-screening-prompt").each(function(j, jText){
		                var jTextHtml = jText.innerHTML;
		                if (i < j && iTextHtml == jTextHtml) {
		                    $(this).remove();
		                }
		            });
		        });    
				/*点击div获取文本传值*/
				$(".auto-screening-prompt").on("click",function(){
					$("#chooseCity").val($(this).text());
					$("#autoScreening").addClass("auto-hidden");
					$(".auto-screening-prompt").remove();
				})				
			})
			function clearWord(e){
				$("#chooseCity").val('');
				$('.auto-screening').addClass('auto-hidden');
				$('.auto-screening-prompt').remove();
				$(e).hide();
   				$('#autoScreening').css('background','none');
			}
		</script>
	</body>
</html>
